<template>
  <el-form :model="person" class="w-50 mx-auto mt-5">
    <el-form-item>
      <el-row class="mx-auto w-75">
        <el-col :span="6" class="text-end">
          <span>用户名: </span>
        </el-col>
        <el-col :span="18">
          <el-input
            v-model="person.username"
            placeholder="用户名"
            disabled
          ></el-input>
        </el-col>
      </el-row>
    </el-form-item>

    <el-form-item>
      <el-row class="mx-auto w-75">
        <el-col :span="6" class="text-end">
          <span>修改密码: </span>
        </el-col>
        <el-col :span="18">
          <el-input v-model="person.username" placeholder="密码"></el-input>
        </el-col>
      </el-row>
    </el-form-item>

    <el-form-item>
      <el-row class="mx-auto w-75">
        <el-col :span="6" class="text-end">
          <span>笔名: </span>
        </el-col>
        <el-col :span="18">
          <el-input v-model="person.username" placeholder="昵称"></el-input>
        </el-col>
      </el-row>
    </el-form-item>

    <el-form-item>
      <el-row class="mx-auto w-75">
        <el-col :span="6" class="text-end">
          <span>性别: </span>
        </el-col>
        <el-col :span="18">
          <el-radio v-model="person.gender" label="1">男</el-radio>
          <el-radio v-model="person.gender" label="2">女</el-radio>
          <el-radio v-model="person.gender" label="3">保密</el-radio>
        </el-col>
      </el-row>
    </el-form-item>

    <el-form-item>
      <el-row class="mx-auto w-75">
        <el-col :span="6" class="text-end">
          <span> 头像: </span>
        </el-col>
        <el-col :span="18">
          <el-upload :action="uploadPath" :on-success="imgOnSuccess">
            <img
              v-if="person.headUrl"
              :src="person.headUrl"
              class="headImg border"
            />
            <el-icon v-else class="headImg border"><Plus /></el-icon>
          </el-upload>
        </el-col> 
      </el-row>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" class="mx-auto" @click="saveAuthorInfo">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { Plus } from "@element-plus/icons-vue";
import { baseURL } from "@/tools/axios-http.js";
import auth from "@/tools/auth.js";

export default {
  name: "SpacePerson",
  components: {
    Plus,
  },
  data() {
    return {
      //上传路径
      uploadPath: baseURL + "/api/upload",
      person: {
        username: null,
        password: null,
        confirmPass: null,
        authorName: null,
        headUrl: null,
        gender: null,
      },
    };
  },
  methods: {
    //图片上传成功后的处理函数
    imgOnSuccess(response) {
      let downloadUrl = response.data;
      this.person.headUrl = downloadUrl;
    },
    loadAuthorInfo() {
      this.person = auth.getLoginUser();
    },
    saveAuthorInfo() {
      this.$axios
        .post("/api/space/person/edit", this.person)
        .then((response) => {
          let data = response.data;
          if (data.code == 200) {
            let nowLoginUser = data.data;
            auth.updateLoginUser(nowLoginUser);
          }
          alert(data.msg);
        });
    },
  },
  mounted() {
    this.loadAuthorInfo();
  },
};
</script>

<style scoped>
.headImg {
  width: 5rem;
  height: 5rem;
  border-radius: 10%;
}
</style>